<template>
    <div>
        <mt-loadmore
            :bottom-method="loadBottom"
            :bottom-all-loaded="allLoaded"
            :autoFill="false"
            ref="loadmore"
        >
            <div class="source-list">
                <div
                    v-for="(item,index) in list"
                    :key="index"
                    @click="listDetail(item.projectPropertyId,item.name,item.no,item.showImg,item.houseDescription,item.issuedInfo,item.propertyTypeName,item.developer,item.equityLimit,item.priceRange,item.turnRoomTime,item.houseNumber,item.loanIs,item.showVideo,item.projectDetailInfo,item.oldNewType,item.planningAcreage)"
                    class="source-list-detail"
                    >
                    <div class="source-list-detail-left">
                        <img :src="item.showImg" alt />
                        <!-- <div>
                            <img src="../assets/img/dingweiWhite.png" alt />
                            <span class="singleSee">泰国曼谷</span>
                        </div>-->
                    </div>
                    <div class="source-list-detail-right">
                        <p>{{item.name}}</p>
                        <p>￥{{item.priceRange}}万</p>
                        <div>
                            <span>{{item.house_type}}</span>
                            <span>|</span>
                            <span>{{item.planningAcreage}}m²</span>
                        </div>
                        <div>
                            <div>
                                <img src="../assets/img/gongyu.png" alt />
                                <span>{{item.propertyTypeName}}</span>
                            </div>
                            <!-- <div>
                                <img src="../assets/img/gongyu.png" alt />
                                <span>公寓</span>
                            </div>
                            <div> 
                                <img src="../assets/img/lianpai.png" alt />
                                <span>联排</span>
                            </div>
                            <div>
                                <img src="../assets/img/jingzhuang.png" alt />
                                <span>精装</span>
                            </div>-->
                        </div>
                    </div>
                </div>
                <p v-show="noMsg" class="noMsg">没有更多数据了！</p>
            </div>
        </mt-loadmore>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            //加载
            allLoaded: false, //数据是否加载完毕 
            topStatus: "",
            pageNum: 1,
            list: [],
            noMsg:false,
        };
    },
    props: ["screeningCondition"],
    created() {
        console.log(this.screeningCondition);
       // this.getList();
    },
    watch: {
        screeningCondition() {
            this.getList();
        }
    },
    methods: {
        //获取列表
        getList() {
            this.$axios
                .get(this.address.houseSourceList, {
                    params: this.screeningCondition
                })
                .then(res => {
                    console.log(res.data, 9999);
                    if (res.data.code == 200) {
                        this.list = res.data.data;
                        if (res.data.data.length <= 0) {
                            this.noMsg = true
                            this.allLoaded = true
                        }else{
                            this.noMsg = false
                            this.allLoaded = false
                        }
                    }
                });
        },
        // :top-method="loadTop"
        // @top-status-change="handleTopChange"
        //下拉刷新
        // handleTopChange(status) {
        //     this.screeningCondition.page = 1
        //     this.getList();
        //     this.topStatus = status;
        // },
        loadTop() {
            setTimeout(() => {
                this.$refs.loadmore.onTopLoaded();
            }, 1000);
        },
        //上拉加载
        loadBottom() {
            this.screeningCondition.page++;
            this.$axios
                .get(this.address.houseSourceList, {
                    params: this.screeningCondition
                })
                .then(res => {
                    console.log(res.data, 9999);
                    if (res.data.code == 200) {
                        this.$refs.loadmore.onBottomLoaded();
                        for (var i = 0; i < res.data.data.length; i++) {
                            this.list.push(res.data.data[i]);
                        }
                            if (res.data.data.length <= 0) {
                            this.noMsg = true
                            this.allLoaded = true
                        }else{
                            this.noMsg = false
                            this.allLoaded = false
                        }
                        
                    }
                });
        },
        // 点击跳转详情
        listDetail(
            one,
            two,
            free,
            five,
            six,
            four,
            num,
            num1,
            num2,
            num3,
            num4,
            num5,
            num6,
            num7,
            num8,
            num9,
            num10
        ) {
            var details = {
                projectPropertyId: one,
                name: two,
                no: free,
                showImg: five,
                houseDescription: six,
                issuedInfo: four,
                propertyTypeName: num,
                developer: num1,
                equityLimit: num2,
                priceRange: num3,
                turnRoomTime: num4,
                houseNumber: num5,
                loanIs: num6,
                showVideo: num7,
                projectDetailInfo: num8,
                oldNewType: num9,
                planningAcreage: num10
            };
            details = JSON.stringify(details);
            this.$router.push({
                path: "sourceDetail",
                query: {
                    details
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.source-list {
    padding: 10px 15px 15px;
    .source-list-detail {
        .flexBetween();
        width: 100%;
        height: 128px;
        padding: 10px;
        box-shadow: 0 0 8px 2px #eee;
        margin-bottom: 20px;
        .source-list-detail-left {
            width: 40%;
            .flexCenterContent();
            margin-right: 10px;
            position: relative;
            div:nth-child(2) {
                position: absolute;
                left: 10%;
                top: 70%;
                width: 80%;
                background-color: rgba(0, 0, 0, 0.5);
                font-size: 12px;
                color: #fff;
                padding: 4px 2px;
                .flexCenterCenter();
                border-radius: 4px;
                > img {
                    width: 10px;
                    margin-right: 4px;
                }
            }
        }
        .source-list-detail-right {
            width: 60%;
            padding-top: 10px;
            p:nth-child(1) {
                font-size: 14px;
                color: @blackColor8;
                font-weight: bold;
            }
            p:nth-child(2) {
                font-size: 16px;
                color: @blueColor10;
                font-weight: bold;
            }
            > div:nth-child(3) {
                color: @blackColor5;
                font-size: 12px;
                padding: 8px 0;
                border-bottom: 1px solid @blackColor3;
            }
            div:nth-child(4) {
                font-size: 12px;
                color: @blackColor7;
                .flexStartCenter();
                margin-top: 8px;
                div {
                    margin-right: 15px;
                }
                img {
                    width: 10px;
                }
            }
        }
    }
}
</style>
